<template>
  <view class="progress-wrap">
    <!-- 图片层（在刻度上方显示图片） -->
    <view class="images-row">
      <view
        v-for="(m, idx) in marks"
        :key="idx"
        class="mark-image"
        :style="{ left: markLeft(m) }"
		@click="onImageClick(idx)"  
      >
        <image :src="images[idx]" mode="aspectFill" class="img" />
      </view>
    </view>

    <!-- 进度条轨道 -->
    <view class="bar">
      <!-- 未完成背景 -->
      <view class="bar-bg"></view>
      <!-- 已完成 -->
      <view
        class="bar-fg"
        :style="{ width: safeValue + '%' }"
      ></view>

      <!-- 刻度点（圆点） -->
      <view
        v-for="(m, idx) in marks"
        :key="'dot' + idx"
        class="dot"
        :class="{ active: safeValue >= m }"
        :style="{ left: markLeft(m) }"
      ></view>

      <!-- 刻度文案（可选） -->
      <view
        v-for="(m, idx) in marks"
        :key="'label' + idx"
        class="label"
        :style="{ left: markLeft(m) }"
      >{{ m }}</view>
	  <!-- 当前进度标记（空心圆） -->
	 <view
	   class="current-dot-wrap"
	   :style="{ left: safeValue + '%' }"
	 >
	   <view class="current-dot"></view>
	 </view>

    </view>
  </view>
</template>

<script>
export default {
  name: 'ThreePointProgress',
  props: {
    // 当前进度 0-100
    value: {
      type: Number,
      default: 0
    },
    // 三个刻度，默认 20,50,100
    marks: {
      type: Array,
      default() {
        return [];
      }
    },
    // 图片数组，对应 marks 的位置
    images: {
      type: Array,
      default() {
        // 占位图片，建议替换为你自己的资源
        return [
          '/static/mark1.png',
          '/static/mark2.png',
          '/static/mark3.png'
        ];
      }
    }
  },
  computed: {
    // 限制在0-100
    safeValue() {
      const v = Number(this.value) || 0;
      if (v < 0) return 0;
      if (v > 100) return 100;
      return v;
    }
  },
  methods: {
    // 计算 left 样式（字符串带 % 和 translateX 居中）
    // 这里返回字符如 "20%"（样式里用 transform: translateX(-50%)）
    markLeft(mark) {
      return `${mark}%`;
    },
	 onImageClick(index) {
	    // 向父组件抛出事件（推荐做法）
	    this.$emit('imageClick', index);
	    // 或者直接打印：
	    console.log('点击了第', index + 1, '个图片');
	  }
  }
};
</script>

<style scoped>
	
/* 外层蓝色环（包裹内圆） */
.current-dot-wrap {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;   /* 外圈直径 */
  height: 16px;
  border-radius: 50%;
  background: #3484E6; /* 蓝色外圈 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

/* 内层白色实心圆 */
.current-dot {
  width: 10px;   /* 内圆直径 */
  height: 10px;
  border-radius: 50%;
  background: #ffffff; /* 白色实心圆 */
}

.progress-wrap {
  padding: 	0px 20px 0rpx 0rpx;
  width: 140%;
  box-sizing: border-box;
  position: relative;
  margin-right: 20rpx;
}

/* 图片层，使用绝对定位在进度条上方 */
.images-row {
  position: relative;
  height: 56px; /* 根据图片高度调整 */
  margin-bottom: 6px;
}

/* 每个图片容器 */
.mark-image {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图片样式 */
.mark-image .img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* 进度条容器 */
.bar {
  position: relative;
  height: 5px;
  width: 100%;
  /* 下面为居中显示方便预览 */
  display: block;
}

/* 背景轨道 */
.bar-bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 110%;
  background: #D9D9D9;
  border-radius: 8px;
}

/* 已完成部分 */
.bar-fg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #8CB6FE;
  border-radius: 8px;
  transition: width 0.35s ease;
  z-index: 2;
}

/* 刻度小圆点 */
.dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b5afaf;
  border: 2px solid #b3acac;
  z-index: 3;
  box-sizing: border-box;
}

/* 激活状态（进度超过该点）显示填充色边框或整点填充）*/
.dot.active {
  background: #287EE4; /* 深蓝色 */
  border-color: #287EE4;
}

/* 刻度文字（可删） */
.label {
  position: absolute;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  font-size: 12px;
  color: #333;
  z-index: 1;
}
</style>
